
<template>
  <view class="box">
    <navigator v-if="showBack" open-type="navigateBack" hover-class="tap-hover"
      class="back ai-center jc-center br-50percent">
      <u-icon size="36" color="#fff" name="arrow-leftward" />
    </navigator>
    <view class="relative width-100percent height-100percent">
      <swiper @change="changePoster" circular :autoplay="true" class="swiper">
        <swiper-item class="swiper-item" v-for="(item, index) in posters" :key="index">
          <u-image class="absolute" style="filter: blur(10px);" width="100%" height="100%" radius="18" :src="item.img"
            mode="aspectFill" />
          <u-image width="100%" style="box-shadow: 0 0 10px #eee;" height="100%" radius="18"
            :src="item.img + `?v=${systemInfo.appWgtVersion || systemInfo.appVersionCode}`" mode="aspectFit" />
        </swiper-item>
      </swiper>
      <view class="slider fd-row jc-center absolute right-30">
        <view v-for="(item, index) in posters" :key="index" class="width-30 height-6 br-18 ml-6 mr-6"
          :style="{ backgroundColor: index === swiperCurrent ? `#fff` : `rgba(51,51,51,0.4)` }" />
      </view>
    </view>

    <view class="content">
      <u-image fit="contain" width="120" height="120" radius="12" src="/static/logo.png" />
      <text class="description">{{ systemInfo.appName }}</text>
      <button class="button" plain :disabled="buttonDisabled" :loading="buttonLoading" @click="download"
        hover-class="tap-hover">
        {{ buttonText }}
      </button>
    </view>

    <u-popup v-model="qrCodePopup" @input="changePopup($event, 'qrCodePopup')" mode="center">
      <l-painter ref="painterRef" css="width: 390rpx; height: 390rpx;" isCanvasToTempFilePath>
        <l-painter-view
          css="position: relative; background-color: #fff;  width: 100%; height: 100%; border-radius: 12rpx;">
          <l-painter-qrcode css="position: absolute; width: 360rpx; height: 360rpx; left: 15rpx; top: 15rpx;"
            :text="qrcodeText" />
        </l-painter-view>
      </l-painter>
    </u-popup>

    <u-popup v-model="maskPopup" @input="changePopup($event, 'maskPopup')" mode="center">
      <u-image width="100vw" :src="`${config.URL_STATIC}/img/mask.png`" mode="widthFix" />
    </u-popup>
  </view>
</template>
<script lang="ts">
import { mapState } from "vuex";
import { checkVersion } from '@/common/libs/dependency';
import { defineComponent } from "vue";
import { getClient } from "@/common/libs/utils";

export default defineComponent({
  data() {
    return {
      config: {} as any,
      env: getClient(),
      buttonDisabled: false,
      buttonText: "立即下载",
      buttonLoading: false,
      systemInfo: uni.getSystemInfoSync(),
      swiperCurrent: 0,
      showBack: false,
      qrCodePopup: false,
      maskPopup: false
    };
  },
  computed: {
    ...mapState(["theme"]),
    posters() {
      return [
        { img: `${this.config.URL_STATIC}/img/launcher.png` },
      ]
    },
    qrcodeText() {
      return `${this.config.URL_ASSETS}${this.config.ASSETS_PREFIX}/#/pages/common/download?scan=1`
    }
  },
  onLoad({ scan }: any) {
    this.showBack = getCurrentPages().length > 1;
    this.config = getApp().globalData?.$config || {};
    switch (this.env) {
      case 3:
        // iOS使用通用链接无需处理
        break;
      case 4:
        location.href = "planet-rise://open";
        break;
      case 5:
      case 6:
        this.buttonText = "查看下载二维码";
        break;
      case 7:
      case 8:
        this.buttonDisabled = true;
        this.buttonText = "暂不支持";
        break;
      default:
        break;
    }

    !!+scan && this.download();
  },
  methods: {
    changePopup(e: boolean, popupKey: "qrCodePopup" | "maskPopup") {
      this[popupKey] = e;
    },
    changePoster({ detail }: any) {
      this.swiperCurrent = detail.current;
    },
    download() {
      if (this.buttonDisabled) return;
      switch (this.env) {
        case 1:
        case 2:
          this.buttonDisabled = true;
          this.maskPopup = true;
          return;
        case 5:
        case 6:
          this.qrCodePopup = true;
          return;
        case 7:
        case 8:
          uni.showToast({ title: "暂不支持!", icon: "none" });
          return;
        case 3:
        // uni.showToast({ title: "尚未开放", icon: "none" });
        // break;
        default:
          this.buttonLoading = true;
          checkVersion({ showToast: true });
          return;
      }
    }
  }
});
</script>

<style lang="scss">
page {
  height: 100%;
}

.back {
  position: fixed;
  left: calc(var(--window-left) + 3px);
  right: calc(var(--window-right) + 3px);
  height: 32px;
  width: 32px;
  top: calc(7px + var(--status-bar-height));
  overflow: hidden;
  box-sizing: border-box;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
  transition-property: all;
}

.slider {
  top: 16px;
  top: calc(var(--status-bar-height) + 16px);
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  align-items: center;
  background-image: $uni-bg-color-primary;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 30rpx 0;
  color: $uni-color-primary;
}

.title {
  font-size: 60rpx;
  font-weight: 700;
}

.subtitle {
  margin-top: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: -60rpx;
  right: -60rpx;
  padding: 50rpx 15px 60rpx;
  background-color: rgba($uni-bg-color-section, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 5px $uni-bg-color;
  border-radius: 50% 50% 0 0;
}

.description {
  width: 700rpx;
  text-align: center;
  margin-top: 24px;
  color: $uni-text-color-inverse;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.button {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  border-radius: 30px;
  width: 260px;
  color: #fff !important;
  border: none !important;
  font-size: 30rpx;
  background: $uni-bg-color-linear !important;
}
</style>